<template>
  <div class="website-management">

    <h2>网站默认设置</h2>
    <div style="display: flex;
    flex-direction: row;
    justify-content: space-between;">
    <!-- 网站默认设置 -->
    <div>
      <el-form :model="form" label-width="160px" class="default-settings" >
      <el-form-item>
        <template #label>
    <p style="margin-top: 10px;">网页标题后缀</p>
    
  </template>
        <el-radio-group v-model="form.pageTitleSuffix">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
  <template #label>
    <p>网页默认标题</p>
    <p>(Title)</p>
  </template>
        <el-input 
          style="margin-bottom: 10px;"
          v-model="form.pageTitle" 
          placeholder="请输入网页默认标题" 
          :maxlength="64" 
          @input="checkMaxLength('pageTitle', 64)"
          >
          <template slot="suffix">
            <i 
          class="el-icon-close" 
          v-if="form.pageTitle" 
          @click="resetInput" 
          style="cursor: pointer; margin-right: 5px;"></i>
          </template>
        </el-input>
        <span class="char-count">{{ form.pageTitle.length }}/64字符</span>
        <span><el-button type="text" class="custom-button" >不知道怎么写?</el-button></span>
        <span><el-button type="text" class="custom-button">提取关键词</el-button></span>
      </el-form-item>

      <el-form-item>
  <template #label>
    <p>网页关键词</p>
    <p>(Keywords)</p>
  </template>
        <el-input 
          style="margin-bottom: 10px;"
          v-model="form.pageKeywords" 
          placeholder="请输入网页关键词" 
          :maxlength="100" 
          @input="checkMaxLength('pageKeywords', 100)">
          <template slot="suffix">
            <i 
          class="el-icon-close" 
          v-if="form.pageKeywords" 
          @click="resetInput2" 
          style="cursor: pointer; margin-right: 5px;"></i>
          </template>
        </el-input>
        <span class="char-count">{{ form.pageKeywords.length }}/100字符</span>
        <span><el-button type="text" class="custom-button" >不知道怎么写?</el-button></span>
        <span><el-button type="text" class="custom-button">提取关键词</el-button></span>
      </el-form-item>

      <el-form-item>
        <template #label>
    <p>网页描述</p>
    <p>(Description)</p>
  </template>
        <el-input 
        style="margin-bottom: 5px;"
          type="textarea" 
          v-model="form.pageDescription" 
          placeholder="请输入网页描述" 
          :maxlength="120" 
          @input="checkMaxLength('pageDescription', 120)">
        </el-input>
        <span class="char-count">你还可以输<span style="color: orange; ">{{ 120 - form.pageDescription.length }}</span>个字符剩余</span>
        <span><el-button type="text" class="custom-button" >不知道怎么写?</el-button></span>
        <span><el-button type="text" class="custom-button">提取关键词</el-button></span>
      </el-form-item>
      </el-form>
    </div>

      
    <!-- 百度收录/排名操作 -->
    <div class="seo-operations">
      <p>百度收录必备操作</p>
      <div class="container">
      <div class="item" v-for="(item, index) in items" :key="index">
      <span class="icon">
        <i :class="item.icon.class" :style="{ color: item.icon.color }"></i>
        <span style="color: #a3a4a4;" v-if="!item.icon.class">•</span>
      </span>
      <span class="text">{{ item.text }}</span>
      <span class="action" v-for="btm in item.btm" :key="btm.id">
        <el-button type="text" style="color: black;" @click="btm.action">{{ btm.actionText }}</el-button>
      </span>
    </div>
  </div>


  <p><span style="background-color: red; color: white; width: 20px; height: 20px; border-radius: 20%; display: inline-block;margin-right: 6px;text-align: center;">推</span>收录优化操作</p>      
  <div class="container">
        <div class="item" v-for="(item, index) in optimizationItems" :key="index">
          <el-checkbox v-model="form[item.model]">
          </el-checkbox>
          <div style="margin:0 0 10px 10px ; flex-grow: 1;">
            <span>{{ item.text }}</span>
          <span style="margin-left: 10px;"><i class="el-icon-question" style="color: #a3a4a4;"></i></span>
          </div>
          <span  style="margin:0 0 10px 10px ;">
            <el-button v-if="item.hasButton" type="text" style="color: black;" @click="item.action">【了解更多】</el-button>
          </span>
        </div>
      </div>
    </div>
   </div>
    
    <!-- 独立页面SEO设置 -->
     <div style="display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin: 20px;">
      <h2>独立页面SEO设置</h2>
      <el-input placeholder="搜索页面" v-model="search" style="width: 300px;margin-right: 10px;"></el-input>
     </div>
    
    <el-table :data="filteredTableData" :header-cell-style="{ background: '#EBEEF2' }">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="静态网页标题名称" width="180"></el-table-column>
      <el-table-column prop="category" label="所属分类" width="120"></el-table-column>
      <el-table-column prop="url" label="网页地址"></el-table-column>
      <el-table-column prop="description" label="简短描述"></el-table-column>
      <el-table-column prop="time" label="录入时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        pageTitleSuffix: '是',
        pageTitle: '',
        pageKeywords: '',
        pageDescription: '',
        useCustomTitle: false,
        recordBeian: false,
        updateTDK: false,
        updateArticle: false,
        submitToBaidu: false,
        enableHtmlStatic: false,
        enable301Redirect: false,
        enable404Page: false,
        enableBaiduPush: false,
        enableApiPush: false,
        enableSitemap: false,
        enableNofollow: false,
      },
      search: '',
      items: [
        {
          text: '拥有顶级域名',
          btm:[{
            action: () => this.upgrade(),
            actionText: '【立既升级】',
          }],
          icon: {
            class: 'el-icon-warning-outline',
            color: 'orange'
          }
        },
        {
          text: '域名备案',
          btm:[
            {
              action: () => this.setup(),
              actionText: '【设置】',
            }
          ],
          icon: {
            class: 'el-icon-warning-outline',
            color: 'orange'
          }
        },
        {
          text: '设置网站 TDK',
          btm:[
            {
              id: 1,
              action: () => this.learnMore(),
          actionText: '【了解更多】',
            },
            {
              id:2,
              action: () => this.learnMore(),
              actionText: '【设置】',
            }
            
          ],

          icon: {
            class: 'el-icon-warning-outline',
            color: 'orange'
          }
        },
        {
          text: '您已连续 10 天以上未更新站内文章',
          btm:[{
            action: () => this.update(),
            actionText: '【更新】',
          }],
          icon: {
            class: 'el-icon-warning-outline',
            color: 'orange'
          }
        },
        {
          text: '提交网址至百度平台',
          btm:[
            {
              id:1,
              action: () => this.submit(),
          actionText: '【点击提交】',
            },
            {
              id:2,
              action: () => this.learnMore(),
              actionText: '【收录查询】',
            }
          ],
          icon: {
            class: '',
            color: ''
          }
        }
      ],
      optimizationItems: [
      { text: '启用网站html静态化', model: 'enableHtmlStatic', hasButton: true, action: this.learnMore },
        { text: '启用301重定向', model: 'enable301Redirect', hasButton: true, action: this.learnMore },
        { text: '启用404页面', model: 'enable404Page', hasButton: false },
        { text: '启用百度主动推送', model: 'enableBaiduPush', hasButton: false },
        { text: '启用API实时推送', model: 'enableApiPush', hasButton: true, action: this.learnMore },
        { text: '启用网站sitemap', model: 'enableSitemap', hasButton: true, action: this.learnMore },
        { text: '启用nofollow', model: 'enableNofollow', hasButton: true, action: this.learnMore },
      ],
      seoTableData: [
        { name: '人才招聘', category: '根', url: '/job/index.aspx', description: '', time: '2016-11-21 11:07' },
        { name: '手机官网帮助首页', category: '帮助中心', url: '/mobile/mhelp/index.aspx', description: '', time: '2015-08-14 16:33' },
      ]
    };
  },
  computed: {
    filteredTableData() {
      return this.seoTableData.filter(item => item.name.includes(this.search));
    }
  },
  methods:{
    checkMaxLength(field, maxLength) {
    if (this.form[field].length > maxLength) {
      this.form[field] = this.form[field].slice(0, maxLength);
    }
  },
  resetInput() {
      this.form.pageTitle = ''; 
    },
  resetInput2() {
      this.form.pageKeywords = ''; 
    },
    upgrade() {
      // 处理升级逻辑
      console.log('升级');
    },
    setup() {
      // 处理设置逻辑
      console.log('设置');
    },
    learnMore() {
      // 处理了解更多逻辑
      console.log('了解更多');
    },
    update() {
      // 处理更新逻辑
      console.log('更新');
    },
    submit() {
      // 处理提交逻辑
      console.log('提交');
    }
  }
};
</script>

<style scoped>
.website-management {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin: auto;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.default-settings {
  margin-bottom: 40px;
}

.el-form-item .el-input {
  width: 400px;
}

.el-form-item .char-count {
  font-size: 12px;
  color: #999;
  margin:0 10px;
}

.seo-operations {
  display: flex;
 border: 1px solid #e4e7ed;
  padding: 15px;
  border-radius: 8px;
  background-color: #fafafa;
  flex-direction: column;
  width: 400px;
}
.action-button {
  margin-left: 10px;
  font-size: 12px;
  color: #409EFF;
}

.seo-operations h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.seo-operations .el-checkbox {
  margin-bottom: 10px;
}

.el-checkbox {
  display: block;
}

.el-table th {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  font-weight: bold;
  text-align: center;
}

.el-table .el-table__body-wrapper tbody tr:hover {
  background-color: #f0f0f0 !important;
}

/* .el-form-item__content {
  margin-left: 150px;
} */
/* .el-form-item__label {
text-align: left;
} */

.el-form-item {
  margin-bottom: 32px;
}
.custom-button {
  color: orange; 
  /* font-weight: bold;  */
  text-decoration: underline; /* 设置文本下划线 */
  font-size: 12px; 
  margin: 0 6px;
}


.container {
  padding: 10px;
}

.item {
  display: flex;
  align-items: center;
  height: 35px;
}

.icon {
  margin-right: 10px;
}

.text {
  flex-grow: 1;
}

.action {
  margin-left: auto;
}


</style>

<style>

.el-form-item__label {
text-align: left;
line-height: 20px;
}

</style>
